<template>
	<view class="viewport settings">
		<InfoBlock>
			<InfoBlockItem size="large" arrow @clickContent="tapVersion">
				<template #label>版本信息</template>
				版本0.0.1
			</InfoBlockItem>

			<InfoBlockItem size="large" arrow @clickContent="tapAgreement">
				<template #label>隐私协议</template>
			</InfoBlockItem>
		</InfoBlock>


		<view v-if="authStore.isLogin" class="logout-button" @click="visible = !visible">退出登录</view>
		<u-popup mode="center" border-radius="24" :safe-area-inset-bottom="true" :mask-close-able="false"
			v-model="visible">
			<view class="popup-logout">
				<view class="popup-logout__tip">确定退出登录吗？</view>
				<view class="popup-logout__footer">
					<u-button type="cancel" :hair-line="false" :custom-style="customStyleButton"
						@click="visible = !visible">取消</u-button>
					<u-button type="primary" :custom-style="customStyleButton" style="margin-left: 40rpx;"
						@click="tapConfirmLogout">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script lang="ts" setup>
	import InfoBlock from '@/components/info-block/info-block.vue';
	import InfoBlockItem from '@/components/info-block/info-block-item.vue';
	import { ref } from 'vue';
	import { logout } from '@/apis/auth';
	import { useAuthStore } from '@/stores';

	const authStore = useAuthStore();
	function tapVersion() { }

	function tapAgreement() {
		uni.navigateTo({
			url: '/pages-mine/agreement/agreement'
		})
	}

	const visible = ref(false)
	const customStyleButton = ref({
		width: '220rpx',
		height: '80rpx'
	});

	function tapConfirmLogout() {
		logout().then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: res.msg ?? '服务器忙，请稍后再试'
				});
				return;
			}
			uni.showToast({
				icon: 'none',
				title: '退出成功'
			});
			authStore.clearProfile();
			visible.value = false;
			setTimeout(() => {
				uni.swtichTab({ url: '/pages/mine/mine' })
			}, 1500);
		});
	}
</script>

<style lang="scss">
	.settings {
		background-color: #F6F6F6;
		padding-top: 50rpx;


		.logout-button {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			align-self: center;
			width: 690rpx;
			height: 92rpx;
			margin-top: 220rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FF710A;
		}

		.popup-logout {
			display: inline-flex;
			flex-shrink: 0;
			flex-direction: column;
			padding: 76rpx 40rpx 56rpx 40rpx;
			box-sizing: border-box;

			&__tip {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 48rpx;
				font-weight: 400;
				font-size: 36rpx;
				color: #101010;
			}

			&__footer {
				display: inline-flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;
				margin-top: 80rpx;
			}
		}
	}
</style>